import '../scss/detail.scss'

import Header from '../components/header/index'
import NewsFrame from '../components/news_frame/index'
import Collector from '../components/collector/index'

import tools from '../utils/tools'
import data from '../utils/data'

const header = new Header(),
			newsFrame = new NewsFrame(),
			collector = new Collector()

const App = ($) => {
	const $app = $('#app'),
				$frameWrapper = $app.children('.frame-wrapper'),
				target = JSON.parse(localStorage.getItem('target')),
				newsUrl = tools.getUrlQueryValue('news_url') || target.url,
				uniquekey = tools.getUrlQueryValue('uniquekey') || target.uniquekey
				

	let collections = JSON.parse(localStorage.getItem('collections')) || {},
			collected = Boolean(collections[uniquekey])
	

	const init = () => {
		render().then(bindEvent)
	}

	const render = () => {
		return new Promise((resolve, reject) => {
			_renderHeader()
			_renderFrame(newsUrl)
			_renderCollector(collected)
			resolve()
		})
	}

	const bindEvent = () => {
		$('.collector').on('click', newsCollect)
	}

	const _renderHeader = () => {
		$app.append(header.tpl({
			title: "新闻详情",
			showLeftIcon: true,
			showRightIcon: false
		}))
	}

	const _renderFrame = (newsUrl) => {
		$frameWrapper.append(newsFrame.tpl(newsUrl))
	}

	const _renderCollector = (collected) => {
		$app.append(collector.tpl(collected))
	}
	
	function newsCollect() {
		if (collections[uniquekey]) {
			delete collections[uniquekey]
			collected = false
		} else {
			collections[uniquekey] = JSON.parse(localStorage.getItem('target'))
			collected = true
		}

		localStorage.setItem('collections', JSON.stringify(collections))
		collector.changeCollector(collected)
	}


	init()
}

App(Zepto)